const path = require('path')
// 引入 html 插件
const HTMLWebpackPlugin = require('html-webpack-plugin')
// 清除编译前的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  //入口文件
  entry: "./src/index.ts",

  //指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 文件名
    filename: "bundle.js",
    environment: {
      arrowFunction: false
    }
  },
  mode: 'development',// 设置mode

  //webpack 打包时使用的模块
  module: {
    //指定加载规则
    rules: [
      {
        //test 规则生效文件
        test: /\.ts$/,
        use: [
          // 配置babel
          {
            //制定加载器
            loader: 'babel-loader',
            // 设置babel
            options: {
              //预定义的环境
              presets: [
                [
                  //环境插件
                  "@babel/preset-env",
                //配置信息 
                  {
                    //要兼容的目标浏览器
                    targets: {
                      "chrome": "88"
                    },
                    // 指定corejs版本
                    "corejs": "3",
                    //表示是按需加载
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          },
          'ts-loader'
        ],
        //排除的文件
        exclude: /node-modules/
      }
    ]
  },
  // 配置 webpack 插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      // title: "自定义的title"
      //自定义一个模板
      template: "./src/index.html"
    })
  ],

  // 用来设置引用模块
  resolve: {
    // 自动解析一下拓展，当我们要引入src/index.ts的时候，只需要写src/index即可
    // 后面我们讲TS模块解析的时候，写src也可以

    extensions: [".tsx", ".ts", ".js"]
  }
}